<!DOCTYPE html>
<html lang="zh-CN">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <title>29 - 东倒西歪按钮 (HTML+CSS)</title>

  <link rel="stylesheet" href="./css/index.css">

</head>

<body>

  <!-- 按钮的父盒子 -->
  <button class="btn">
    <!-- 点击区域，分为左中右 5 个部分 -->
    <div class="part part-1"></div>
    <div class="part part-2"></div>
    <div class="part part-3"></div>
    <div class="part part-4"></div>
    <div class="part part-5"></div>

    <!-- 显示区域，包括文字与背景颜色，要和点击区域同级 -->
    <span class="text">东倒西歪按钮</span>
  </button>

</body>

</html>